<template>
  <div class="imagesinfo_upload">
      <div class="mui-input-row" style="margin: 10px 5px;">
          <select v-model="imgtype">
            <option value ="日常生活">日常生活</option>
            <option value ="工作">工作</option>
            <option value="节日">节日</option>
            <option value="趣味">趣味</option>
        </select>
					<textarea id="textarea" rows="5" placeholder="请输入图片的描述" v-model="imgdesc"></textarea>
			</div>
      <div class="mui-button-row">
          <button type="button" class="mui-btn mui-btn-primary" @click="upload">确认</button>&nbsp;&nbsp;
          <button type="button" class="mui-btn mui-btn-danger"  @click="cancle">取消</button>
      </div>
      <select-image ref = "imgupload"></select-image>
  </div>
</template>

<script>
import SelectImage from "../mycomponents/SelectImage.vue"
import mui from "../../lib/js/mui.min.js";
export default {
  data(){
    return {
      imgdesc:"",
      time:this.$moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
      img:"",
      txt:"",
      imgtype:""
    }
  },
  components:{
    SelectImage
  },
  methods:{
    upload(){
      if(this.imgdesc != ""){
        var imgdesc = this.imgdesc
        this.$http.post("http://localhost:3000/imgdescupload",{imgdesc},{emulateJSON:true}).then((result)=>{
          this.txt = result.body[1];
          this.$refs.imgupload.upload().then((result)=>{
            var obj = {'title':this.imgdesc.substring(0,16)+'.....','img':result,'txt':this.txt,'time':this.time,'type':this.imgtype};
            this.$http.post("http://localhost:3000/setimginfosql",obj,{emulateJSON:true}).then((result)=>{
              this.imgdesc = "";
              mui.toast(result.body);
            })
          })
        })
      }else{
        alert('图片描述不可为空')
      }
    },
    cancle(){
      mui.toast('欢迎体验Hello MUI');
    }
  }
}
</script>

<style lang = 'less' scoped>
  .imagesinfo_upload{
    select{
      border: 1px solid rgba(0,0,0,.2)!important;
      padding-left: 8px;
    }
    position: absolute;
    width: 100%;
    border-top: 1.5px solid rgb(199, 192, 192);
    .mui-input-row{
      margin-bottom: 0 !important;
      #textarea{
        margin-bottom: 0 !important;
      }
    }
    .mui-button-row{
      margin-bottom: 15px;
    }
  }
</style>